<template>
  <div>
    <el-container style="height: 900px; border: 1px solid #eee">
      <el-container>
        <el-header style="text-align: right; font-size: 12px">
          <el-dropdown>
            <i class="el-icon-setting" style="margin-right: 15px"></i>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>新增</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
         
        </el-header>
        <el-main>
          <el-table :data="list">
            <el-table-column label="id" width="150">
              <template slot-scope="scope">
                {{ scope.row.id }}
              </template>
            </el-table-column>
            <el-table-column prop="username" label="账号" width="150"></el-table-column>
            <el-table-column prop="admin" label="身份" width="150"></el-table-column>
            <el-table-column prop="gd.gdName" label="所处工地 "width="150"></el-table-column>
			<el-table-column prop="sb.sbName" label="所用设备" width="150"></el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button type="primary" @click="modifyUser(scope.row.id)">
                  修改
                </el-button>
                <el-button type="danger" @click="removeUser(scope.row.id)">
                  删除
                </el-button>
              </template>

            </el-table-column>
          </el-table>
          <pagination
              :total="total"
              :page.sync="listQuery.page"
              :limit.sync="listQuery.limit"
              @pagination="getList" />
        </el-main>
      </el-container>
    </el-container>
  </div>

</template>

<script>
  import Pagination from '@/components/Pagination'
  export default {
    components: { Pagination },
    data() {
      return {
        list: null,
        total: 0,
        listQuery: {
          page: 1,
          limit: 10
        }
      }
    },
    mounted() {
      this.getUserByPage();
    },
    methods:{
      getList() {
        // 获取数据
        this.getUserByPage();
      },
      getUserByPage(){
        var obj = this;
        this.axios({
          method:"get",
          url:"http://localhost:8088/user/getUsersByPage/"+obj.listQuery.page+"/"+obj.listQuery.limit
        }).then(function(response){
          var result = response.data;

          if (result.code == 1000) {
            console.log(result.data)
            obj.list = result.data.list;
            obj.total = result.data.total;
          } else{
            console.log("请求数据失败")
          }
        })
      },
      modifyUser(id){
        //alert("修改===>" + id);
        this.$router.push("users/modify/" + id)
      },
      removeUser(id){
        var obj = this;
        this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
            obj.axios({
              method:"post",
              url:"http://localhost:8088/user/removeUser/"+id
            }).then(function(response){
              obj.$message({
                type: 'success',
                message: '删除成功!'
              })
              obj.getUserByPage();
          });
        }).catch(() => {
          obj.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      }
    }
  };
</script>

<style>
  .el-header {
    background-color: #B3C0D1;
    color: #333;
    line-height: 60px;
  }

  .el-aside {
    color: #333;
  }
</style>
